<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		
		.box {
			width: 100%;
			background: #ddd5d5;
			text-align: center;
			/*padding: 0px 0 75px 0;*/
			margin-bottom: 5rem;
			overflow: hidden;
		}
		
		.box>ul {
			width: 100%;
			height: 50px;
			margin: auto;
			/*background: yellow;*/
			border-bottom: 2px solid white;
			box-sizing: border-box;
		}
		
		.box>ul:nth-of-type(2n) li {
			/*background: skyblue !important;*/
		}
		/*最后一个*/
		
		.box>ul:nth-last-child(1) li {
			background: #767676;
		}
		
		.box>ul>li {
			/*background: yellow;*/
			color: red;
			list-style: none;
			width: 14.2%;
			height: 50px;
			float: left;
			line-height: 50px;
			font-size: 28px;
			border-radius: 50%;
			background: skyblue;
		}
		
		.box>ul .txag {
			color: blue !important;
		}
		
		.hkfm {
			width: 96px;
			height: 51px;
			background: red;
			position: fixed;
			left: -113px;
			right: 0;
			bottom: 20px;
			margin: auto;
			font-size: 28px;
			text-align: center;
			line-height: 51px;
		}
		
		.hkfm2 {
			width: 96px;
			height: 51px;
			background: yellow;
			position: fixed;
			left: 120px;
			right: 0;
			bottom: 20px;
			margin: auto;
			font-size: 28px;
			text-align: center;
			line-height: 51px;
			
		}
		
		.box>ul>li.hkfmcss {
			background: yellow;
		}
	</style>

	<body>
		<div class="box">
			<ul>
				<li>00</li>
				<li>00</li>
				<li>00</li>
				<li>00</li>
				<li>00</li>
				<li>00</li>
				<li class="txag">00</li>
			</ul>
		</div>
		<div class="hkfm">
			下一组
		</div>
		<div class="hkfm2">
			清除
		</div>
	</body>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="js/js.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript">
		//结果数组
		var resultArray = [];

		function lfn6() {
			var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33"]
			var srr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16"]
			resultArray = [];
			for(var i = 0; i < 6; i++) {
				var randoms = Math.floor(Math.random() * arr.length)
				//减去出现过的号
				var dels = arr.splice(randoms, 1)
				resultArray.push(dels)
			};
			resultArray.sort() //排序
			var randoms2 = Math.floor(Math.random() * srr.length)
			//减去出现过的号
			var dels2 = srr.splice(randoms2, 1)
			resultArray.push(dels2)
		}
	</script>
	<script type="text/javascript">
		var htmlli = "";
		var htmlul = "";
		$(".hkfm").click(function() {
			lfn6()
			htmlli = "";
			for(var j = 0; j < resultArray.length - 1; j++) {
				//				console.log(resultArray[j])
				htmlli += '<li>' + resultArray[j] + '</li>'
				//				htmlli += '<li>' + "00" + '</li>'
			}
			htmlli += '<li class="txag">' + resultArray[6] + '</li>'
			htmlul = '<ul>' + htmlli + '</ul>';
			$('.box').append(htmlul)
			$('html, body').animate({
				scrollTop: $(".box").height()
			}, 100);
			//			console.log(height)
		})
		$('.hkfm2').click(function() {
			htmlli = "";
			$('.box').html("")
			counts=[]
		})
		$(document).on("click", ".box ul li", function() {
			//			if($(this).hasClass("hkfmcss")) {
			//				$(this).removeClass("hkfmcss")
			//			} else {
			//				$(this).addClass("hkfmcss")
			//			}
			var htis = this;
			cookiet(htis)
		})
		//数值
		var counts = [];
		//颜色
		var colours = ["#48c0a4", "#549688", "#69b0ac", "#91ad70", "#7398Ab",
			"#b4caa0", "#5dac81", "#376b6d", "#91b493", "#68b4b0",
			"#90B44B", "#268785", "#008947", "#F8C3CD", "#F4A7B9",
			"#DB4D6D", "#F17C67", "#E3916E", "#F6C555", "#C7802D",
			"#EFBB24", "#E16B8C", "#D0104C", "#B54434", "#F75C2F",
			"#9F353A", "#E8B647", "#FFB11B", "#C73E3A", "#C46243",
			"#E9CD4C", "#005CAF", "#86c166",
		]
		//每个数字点击出现不一样的颜色
		function cookiet(htis) {
			//			$(htis).css("background", "#F8C3CD")
			var thsiCounr = $(htis).text()

			if(counts.indexOf(thsiCounr) == -1) {
				counts.push(thsiCounr)
			}
			if(counts.indexOf(thsiCounr) >= 0) {
				var indexcss = counts.indexOf(thsiCounr)
			}
			if($(htis).attr("yes")=="ok") {
				$(htis).attr("yes","no")
				$(htis).css("background", "")
			} else {
				$(htis).attr("yes","ok")
				$(htis).css("background", colours[indexcss])
			}

		}
	</script>

</html>